<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <link rel="stylesheet" href="/static/css/bootstrap.min.css"> <!--bootstrap样式，请自行下载，版本v3-->
    <script src="/static/js/jquery-3.2.1.min.js"></script>  <!--jquery脚本，请自行下载,版本不要求-->
    <script src="/static/js/bootstrap.min.js"></script>   <!--bootstrap脚本，请自行下载，版本v3-->
    <style>
    body {
      font-size: 14px;
    }
    .my_div {
  min-height: 400px;
  background-color: #f7f7f7;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.my_div .json_div {
  min-width: 100%;
  padding: 10px;
}
.my_div .json_div >.json_div_inner {
  min-width: 100%;
  min-height: 50px;
  border: 1px solid #d3d3d3;
  border-radius: 5px;
  padding: 10px;
}
.my_div .json_div >.json_div_inner >li {
  margin-left: 20px;
}
.my_div #my_progress {
  width: 96%;
  position: relative;
}
.my_div #my_progress >.my_per {
  color: #ff7d7f;
  position: absolute;
  display: block;
  width: 4em;
  top: 1px;
  left: 50%;
}
.my_div .my_bottom {
  padding: 10px 10px 20px;
}
.my_div .my_bottom >#select_image {
  display: none;
}

    </style>
    <title>excel上传</title>
</head>
<body>

    <div class="container-fluid">
        <div class="row">
             <div class="col-lg-offset-3" style="padding: 20px;margin-right: 25%">
                <marquee><span style="font-size: 20px; color: #4cae4c;margin:100px">文件处理时间较长 大概2小时左右!!</span></marquee>
            </div>
            <div class="col-lg-6 col-lg-offset-3 col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 col-xs-12 my_div">
                    <div class="json_div">
                        <ul class="json_div_inner"></ul>
                    </div>
                    <div id="my_progress" class="progress">
                      <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">

                      </div>
                        <span class="my_per">0%</span>
                    </div>
                <div class="my_bottom">
                    <!--
                        <input id="select_image" type="file" accept="image/*" capture="camera" multiple>
                        accept表示打开系统文件目录
                        accept="image/*"  打开相册
                        accept="video/*"  打开视频
                        capture  指调用哪些设备
                        capture='microphone'   调用录音机
                        capture='camera'       调用相机
                        capture='camcorder'    调用摄像机
                        file类型的input还有一个 multiple 的单值属性.表示同时提供打开文件和设备的选项.
                        IOS中, multiple  属性无效. 必须写2个input来自行实现选择.
                        判断是否是苹果手机的方法:
                        navigator.userAgent.toLowerCase() == "iphone os"
                        由于目前拍摄的照片尺寸过大,所以暂时关闭拍照的功能(没有capture="camera" 和 multiple属性)
                    -->
                    <input id="select_image" type="file" multiple size="200">
                    <button id="select_btn" class="btn btn-default btn-primary">选择excel文件</button>
                    <button id="upload_btn" class="btn btn-default btn-primary">点击上传</button>
                </div>
                <div hidden>
                    <a id="downLoad" href="#">aaaaa</a>
                </div>
            </div>
        </div>

    </div>

</body>
<script>
function upload_progress(event, progress_cb){
    /*
    上传进度处理函数
    :params event:       文件上传事的事件,
    :params progress_cb: 回调函数,本函数会把上传完成的百分数当作地一个参数传入此回调函数.
    默认情况下.会在控制台打印上传完成度. 注意,100并不代表服务端完整的接收到了文件.
    只代表页面已经发送完了所有的文件内容.
    */
    if (event.lengthComputable) {
        var complete_percent = Math.round(event.loaded * 100 / event.total);
        var handler = progress_cb?progress_cb: function(num){console.log(`上传完成度:${num}`)};
        handler(complete_percent);
    }else{}
}

function upload_complete(event, success_cb){
    /*
    上传文件success时的事件,只要服务器返回状态码200,就会执行本函数,并并不是代表服务器返回了正确的信息.
    根据实际需要可以覆盖.
    :params event: 文件上传事的事件,一般由XMLHttpRequest的upload的事件监听器来传递事件.
    :params success_cb:   成功时的回调函数,
    :return: nothing
    */
    let str = event.target.responseText;
    let handler = success_cb? success_cb: function(a){console.log(a);};
    handler(str);
    console.log(str);
    let jsonObj = JSON.parse(str);
    if(jsonObj.message != 'success'){
        alert(jsonObj.message)
    }else {
         console.log(jsonObj.filename);
    $("#downLoad")[0].href = "/downLoad/"+jsonObj.filename;
    $("#downLoad")[0].click();

    $("#downLoad")[0].href = "#";
    }

}

function upload_error(event, error_cb){
    /*
    上传文件失败时的事件,根据实际需要可以覆盖.
    :params event: 文件上传事的事件,一般由XMLHttpRequest的upload的事件监听器来传递事件.
    :params error_cb: 失败时的回调函数,
    :return: nothing
    */
    let handler = error_cb? error_cb: function(a){console.log(event);};
    handler(event);
}

function batch_upload(options){
    /*
    批量上传文件. 不限制文件大小
    options = {
    files: 数据的序列,
    url: str,
    headers: 键值对对象,
    success_cb: function,
    error_cb: function,
    progress_cb: function,
    }
    :params files:        input标签的files
    :params url:          上传的服务器url
    :params headers:      放入header的参数,是键值对形式的字典,键名不要用下划线,因为那不符合规范
    :params success_cb:   成功时的回调函数,会把服务器的返回信息作为第一个参数传入此回调函数.
    :params error_cb:     失败时的回调函数,会把错误信息作为第一个参数传入此回调函数.
    :params progress_cb:  上传时的返回上传进度的回调函数,会把页面上传文件的百分书作为第一个参数传入此回调函数..
    :return:              不返回数据,由回调函数返回.
    有关XMLHttpRequest对象的详细信息,请参考.
    https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest
    有关XMLHttpRequest.send方法的详细文档地址:
    https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/send
    */
    let files = options['files'];
    let file_data = options['file_data'];
    let url = options['url'];
    let headers = options['headers'];
    let success_cb = options['success_cb'];
    let error_cb = options['error_cb'];
    let progress_cb = options['progress_cb'];
    let prog_func = function(event){upload_progress(event, progress_cb)};  // 进度的回调函数
    let comp_func = function(event){upload_complete(event, success_cb)};  // 成功时的回调函数
    let erro_func = function(event){upload_error(event, error_cb)};  // 失败时的回调函数

    // 构造数据容器
    let data = new FormData();
    for(let file of files){
        data.append(file.name, file);
    }
    // 新建一个请求对象
    let req = new XMLHttpRequest();
    // 添加事件监听器
    req.upload.addEventListener("progress", prog_func, false);
    req.addEventListener("load", comp_func, false);
    req.addEventListener("error", erro_func, false);
    req.addEventListener("abort", erro_func, false);
    req.open("post", url);
    // 必须在open之后才能给请求头赋值
    if(headers){
        /*
        * 传送请求头信息,目前服务端还未做对应的处理.这只是与被给后来使用的.
        * */
        for(let k in headers){
            req.setRequestHeader(k, headers[k]);
        }
    }
    try{
        req.send(data);  // 404错误会直接在此抛出
    }catch(e){
        let handler = error_cb? error_cb: function(ms){console.log(ms);};
        handler(e);
    }

}

/*扩展函数注册区域*/

$.extend({
    batch_upload: batch_upload                              // 批量上传文件，无尺寸限制
});

// 点击选择按钮的事件
    $("#select_btn").click(function(){
        $("#select_image").click();
    });

    let progress = function(per){
        // 处理上传进度
        console.log(`per is ${per}`);
        $("#my_progress>.progress-bar").attr("style", `width: ${per}%;`).attr("aria-valuenow", `${per}`);
        if(per > 52){
            $(".my_per").css("color", "#fff");
        }
        $(".my_per").text(`${per}%`);
    };

    // 上传图片按钮事件
    $("#select_image").change(function(){
        let ul = $(".json_div_inner:first");
        ul.empty();
        let files = this.files;
        for(let f of files){
            ul.append(`<li id="${f.name}"><span>${f.name}</span></li>`);
        }
    });
    let call_back = function(){
        $("#upload_btn, #select_btn").attr("disabled", false).removeClass("disabled");

    };

    // 上传图片模态框,提交按钮事件
    $("#upload_btn").click(function(){
            let $obj = $("#select_image");
            let files = $obj[0].files;
            let opts = {
                "url": "/excel/parse/save",
                "files": files,
                "success_cb": call_back,
                "error_cb": call_back,
                "progress_cb": progress
            };
            $("#upload_btn, #select_btn").attr("disabled", true).addClass("disabled");
            $.batch_upload(opts);

        });
</script>
</html>